import React from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import { connect } from 'dva'
import { Page } from 'components'
import { Table, Button, Popconfirm } from 'antd'
import classnames from 'classnames'
import { Link } from 'react-router-dom'
import queryString from 'query-string'
import styles from './index.less'
import {routerRedux} from "dva/router";
import Modal from './Modal'

const { confirm } = Modal

const ProjectConfig = ({ projectConfig, dispatch, location, loading, ...tableProps }) => {

  const { project, modalVisible, currentItem } = projectConfig

  const onEditField = (param) => {
    console.log(param)
    dispatch({
      type: 'projectConfig/showModal',
      payload: {
        currentItem: param,
      },
    })
  }

  const onDeleteField = (param) => {
    dispatch({
      type: 'projectConfig/remove',
      payload: {
        id: param.id,
      },
    })
  }

  const showModal = () => {
    dispatch({
      type: 'projectConfig/showModal',
    })
  }

  const columns = [
    {
      title: '编号',
      dataIndex: 'id',
      key: 'id',
      width: 150,
    }, {
      title: '标题',
      dataIndex: 'name',
      key: 'name',
      width: 200,
    }, {
      title: '描述',
      dataIndex: 'description',
      key: 'description',
      width: 150,
    }, {
      title: '排序',
      dataIndex: 'sort',
      key: 'sort',
      width: 100,
    }, {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      width: 100,
    }, {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: 230,
      render: text => moment(text).format('YYYY-MM-DD HH:mm:ss'),
    }, {
      title: '操作',
      key: 'operation',
      width: 200,
      fixed: 'right',
      render: (text, record) => {
        return (<div>
          <Button type="default" onClick={() => onEditField(record)} disabled={project.status === '1'} style={{ marginRight: '15px' }} >编辑</Button>
          <Popconfirm title="确认删除字段？" onConfirm={() => onDeleteField(record)} okText="确认" cancelText="取消">
            <Button type="danger" disabled={project.status === '1'}>删除</Button>
          </Popconfirm>
        </div>)
      },
    },
  ]

  const modalProps = {
    item: currentItem,
    visible: modalVisible,
    maskClosable: false,
    confirmLoading: loading.effects['projectConfig/savefield'],
    title: currentItem.id ? '编辑字段' : '添加字段',
    wrapClassName: 'vertical-center-modal',
    onOk (data) {
      dispatch({
        type: 'projectConfig/save',
        payload: data,
      })
    },
    onCancel () {
      dispatch({
        type: 'projectConfig/hideModal',
      })
    },
  }

  return (
    <Page inner>
      <Button type="primary" style={{ marginBottom: '10px' }} onClick={showModal}>添加字段</Button>
      <Table
        dataSource={project.fields}
        loading={loading.effects['projectConfig/info']}
        className={classnames({ [styles.table]: true })}
        bordered
        scroll={{ x: 1250 }}
        columns={columns}
        simple
        rowKey={record => record.id}
      />
      {modalVisible && <Modal {...modalProps} />}
    </Page>
  )
}

ProjectConfig.propTypes = {
  projectConfig: PropTypes.object,
  loading: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
}

export default connect(({ projectConfig, loading }) => ({ projectConfig, loading }))(ProjectConfig)
